import { Table, Space, Input, Button } from 'antd'
import { useRef, useState } from 'react'
import { useColumns, useFileButton } from './hook'
const Com = () => {
    const [proList, setProList] = useState()
    const fileRef = useRef()
    const columns = useColumns()
    const [able, setAble] = useState(false)
    const { selectExcel, uploadFile } = useFileButton(fileRef)
    const uploadFileFn = () => {
        uploadFile().then(proList => {
            setProList(proList)
            setAble(true)
        })
    }
    const upload = () => {
        setAble(false)
    }
    return (
        <Space direction="vertical" style={{ width: '100%' }}>
            {able
                ? <Button type="primary" onClick={upload}>上传数据1</Button>
                : <Button type="primary" onClick={selectExcel}>导入数据1</Button>
            }
            <Input ref={fileRef} hidden type="file" onChange={uploadFileFn} />
            <Table
                dataSource={proList}
                columns={columns}
                rowKey="proname"
            >

            </Table>
        </Space>
    )
}

export default Com